<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
  <title>Document</title>
  <link rel="stylesheet" href="./src/css/base.css">
  <link rel="stylesheet" href="./src/css/index.css">
  <link rel="stylesheet" href="./lib/swiper/css/swiper.min.css">
</head>

<body>
  <div class="view">
    <!-- 头部下载 -->
    <div class="home_top clearfix">
      <div class="home_title">
        <img src="./src/images/bm.png" alt="">
        <div class="game_title">
          <h4>王者荣耀</h4>
          <p>王者相见,打成一片</p>
        </div>
      </div>
      <div class="home_down">
        <img src="./src/images/down.png
        " alt="">
      </div>
    </div>
    <!-- 首页轮播图 -->
    <div class="wz_carousel swiper-container">
      <div class="carousel_item clearfix swiper-wrapper">
        <!-- <a href="javascript:;"> <img src="./src/mork_images/1.jpg" alt=""> <div class="des">王者猴教学</div> </a> -->
        <!-- <a href="javascript:;"> <img src="./src/mork_images/1.jpg" alt=""> <div class="des">王者猴教学</div> </a> -->
        <!-- <a href="javascript:;"> <img src="./src/mork_images/1.jpg" alt=""> <div class="des">王者猴教学</div> </a> -->
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <!-- 首页导航 -->
    <nav class="clearfix">
      <!-- <a href="javascript:;"><span></span><p>英雄介绍</p></a>
      <a href="javascript:;"><span></span><p>活动</p></a>
      <a href="javascript:;"><span></span><p>赛事</p></a>
      <a href="javascript:;"><span></span><p>体验服</p></a>
      <a href="javascript:;"><span></span><p>咨询</p></a>
      <a href="javascript:;"><span></span><p>社区</p></a>
      <a href="javascript:;"><span></span><p>新手</p></a>
      <a href="javascript:;"><span></span><p>故事站</p></a> -->
    </nav>

    <!-- 热点资讯 -->
    <div class="hot_news media_item">
      <div class="item_title">
        <span></span> 热点资讯
        <a href="javascript:;"></a>
      </div>
      <div class="news_item">
        <!-- <a href="javascript:;">新闻 | 情报站-新版本大爆料~社交优.... <span>06/21</span></a>
        <a href="javascript:;">新闻 | 情报站-新版本大爆料~社交优.... <span>06/21</span></a>
        <a href="javascript:;">新闻 | 情报站-新版本大爆料~社交优.... <span>06/21</span></a> -->
      </div>
    </div>

    <!-- 精彩视频 -->
    <div class="splendid_video  media_item ">
      <div class="item_title">
        <span></span> 精彩视频
        <a href="javascript:;"></a>
      </div>
      <div class=" video_content clearfix">
        <div class="video_item">
          <img src="./src/mork_images/00.png" alt="">
          <p>KPL第一周 ESTAR气势KPL第一周</p>
          <span></span>
        </div>
        <div class="video_item">
          <img src="./src/mork_images/00.png" alt="">
          <p>KPL第一周 ESTAR气势KPL第一周</p>
          <span></span>
        </div>
      </div>
    </div>

    <!-- 精品攻略 -->
    <div class="game_plans media_item">
      <div class="item_title">
        <span></span> 精品攻略
        <a href="javascript:;"></a>
      </div>
      <!-- 内容 -->
      <div class="game_content">
        <ul>
          <li class="clearfix">
            <a href="javascript:;" class="game_img"> <img src="./src/mork_images/123.jpg" alt=""> </a>
            <a href="javascript:;" class="game_tips">
              <div class="tips_title">
                <div class="title1">KPL每周话题：四强出炉，谁主沉浮？</div>
                <div class="title2">KPL每周话题：四强出炉，谁主沉浮？</div>
              </div>
              <div class="tips_time">
                <p>947 <span></span></p>
                <p>06-21</p>
              </div>
            </a>
          </li>
          <li class="clearfix">
            <a href="javascript:;" class="game_img"> <img src="./src/mork_images/223.jpg" alt=""> </a>
            <a href="javascript:;" class="game_tips">
              <div class="tips_title">
                <div class="title1">KPL每周话题：四强出炉，谁主沉浮？</div>
                <div class="title2">KPL每周话题：四强出炉，谁主沉浮？</div>
              </div>
              <div class="tips_time">
                <p>947 <span></span></p>
                <p>06-21</p>
              </div>
            </a>
          </li>
          <li class="clearfix">
            <a href="javascript:;" class="game_img"> <img src="./src/mork_images/224.jpg" alt=""> </a>
            <a href="javascript:;" class="game_tips">
              <div class="tips_title">
                <div class="title1">KPL每周话题：四强出炉，谁主沉浮？</div>
                <div class="title2">KPL每周话题：四强出炉，谁主沉浮？</div>
              </div>
              <div class="tips_time">
                <p>947 <span></span></p>
                <p>06-21</p>
              </div>
            </a>
          </li>

        </ul>
      </div>
    </div>

    <footer class="clearfix">
      <a href="index.html"></a>
      <a href="./video.html"></a>
      <a href="./strategy.html"></a>
      <a href="./match.html"></a>
    </footer>
  </div>
  <script src="./lib/jquery.1.12.4.js"></script>
  <script src="./lib/swiper/js/swiper.jquery.min.js"></script>
  <script>
    $(function () {
      loadCarousel();
      loadNav();
      loadHotNews();
      loadRaiders();
      // 初始化轮播图
      function loadCarousel() {
        // 请求轮播图数据
        $.get("http://139.199.192.48:9092/api/getlunbo?type=home", function (result) {
          // console.log(data);
          if (result.status == 0) {
            // 判断状态码  0 为成功
            // 父元素
            // 拼接字符串
            var htmlArr = [];;
            var arr = result.message;
            for (var i = 0; i < arr.length; i++) {
              var element = arr[i];
              htmlArr.push('<a class="swiper-slide" href="' + element.Url + '"> <img src="' + element.lunboImgpath + '" alt=""> <div class="des">' + element.lunboTitle + '</div> </a>');
            }
            $(".carousel_item").html(htmlArr.join(''));

            // 初始化轮播图插件
            var mySwiper = new Swiper('.swiper-container', {
              loop: true,
              autoplay: 1000,
              pagination: '.swiper-pagination',
              autoplayDisableOnInteraction: false
            })
          }
        });
      }

      // 加载首页导航数据
      function loadNav() {
        // <a href="javascript:;"><span></span><p>新手</p></a>
        $.get("http://139.199.192.48:9092/api/getnavlist", function (result) {
          // 判断状态 0 为成功
          if (result.status == 0) {
            var arr = result.message;
            // 声明html数组
            var htmlArr = [];
            for (var i = 0; i < arr.length; i++) {
              var element = arr[i];
              htmlArr.push('<a href="' + element.navUrl + '"><span></span><p>' + element.navTitle + '</p></a>');
            }

            $("nav").html(htmlArr.join(''));
          }
        });
      }

      // 加载热点资讯
      function loadHotNews() {
        /* 新闻 */
        $.get("http://139.199.192.48:9092/api/getnews?type=新闻&pageIndex=3&pageSize=1", function (result) {
          // 判断返回状态 0 为成功
          if (result.status == 0) {
            // 获取咨询数据
            var arr = result.message;
            // 要拼接的HTML字符串
            var htmlArr = [];
            for (var i = 0; i < arr.length; i++) {
              var element = arr[i];
              htmlArr.push('<a class="clearfix" href="' + element.url + '"> <p class="h_title">新闻 |' + element.title + '</p><p class="h_date">' + element.createDate + '</p></a> ');
            }
            $(".news_item").append(htmlArr.join(''));
          }
        });
        // 赛事
        $.get("http://139.199.192.48:9092/api/getnews?type=赛事&pageIndex=1&pageSize=1", function (result) {
          // 判断返回状态 0 为成功
          if (result.status == 0) {
            // 获取咨询数据
            var arr = result.message;
            // 要拼接的HTML字符串
            var htmlArr = [];
            for (var i = 0; i < arr.length; i++) {
              var element = arr[i];
              htmlArr.push('<a class="clearfix" href="' + element.url + '"> <p class="h_title">赛事 |' + element.title + '</p><p class="h_date">' + element.createDate + '</p></a> ');
            }
            $(".news_item").append(htmlArr.join(''));
          }
        });
        $.get("http://139.199.192.48:9092/api/getnews?type=公告&pageIndex=1&pageSize=1", function (result) {
          // 判断返回状态 0 为成功
          if (result.status == 0) {
            // 获取咨询数据
            var arr = result.message;
            // 要拼接的HTML字符串
            var htmlArr = [];
            for (var i = 0; i < arr.length; i++) {
              var element = arr[i];
              htmlArr.push('<a class="clearfix" href="' + element.url + '"><p class="h_title">公告 | ' + element.title + '</p><p class="h_date">' + element.createDate + '</p></a> ');
            }
            $(".news_item").append(htmlArr.join(''));
          }
        });
      }

      // 加载精品攻略
      function loadRaiders() {
        // <li class="clearfix">
        //     <a href="javascript:;" class="game_img"> <img src="./src/mork_images/123.jpg" alt=""> </a>
        //     <a href="javascript:;" class="game_tips">
        //       <div class="tips_title">
        //         <div class="title1">KPL每周话题：四强出炉，谁主沉浮？</div>
        //         <div class="title2">KPL每周话题：四强出炉，谁主沉浮？</div>
        //       </div>
        //       <div class="tips_time">
        //         <p>947 <span></span></p>
        //         <p>06-21</p>
        //       </div>
        //     </a>
        //   </li>
        $.get("http://139.199.192.48:9092/api/getraiders?type=精品&pageIndex=1&pageSize=3",
          function (result) {
            if (result.status == 0) {
              // 获取成功 
              // 拼接字符串
              var htmlArr = [];
              var datas = result.message;
              for (var i = 0; i < datas.length; i++) {
                var element = datas[i];

                htmlArr.push('<li class="clearfix">');
                htmlArr.push('<a href="' + element.url + '" class="game_img"> <img src="' + element.img + '" alt=""> </a>');
                htmlArr.push('<a href="' + element.url + '" class="game_tips">');
                htmlArr.push('<div class="tips_title">');
                htmlArr.push('<div class="title1">' + element.title + '</div>');
                htmlArr.push('<div class="title2">' + element.summary + '</div>');
                htmlArr.push('</div>');
                htmlArr.push(' <div class="tips_time">');
                htmlArr.push('  <p>' + element.num + ' <span></span></p>');
                htmlArr.push(' <p>' + element.gdate + '</p>');
                htmlArr.push(' </div>');
                htmlArr.push(' </div>');
                htmlArr.push('  </a>');
                htmlArr.push('  </li>');
              }
              $('.game_content>ul').html(htmlArr.join(''));
            }
          });
      }
    });
  </script>
</body>

</html>